<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Check</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <table class="table table-bordered table-hover table-striped">
        <caption>全选操作</caption>
        <thead>
        <tr>
            <th width="70px">
                <label>
                    <input type="checkbox" id="selectAll" title="全选">
                    全选
                </label>
            </th>
            <th>名称</th>
            <th>城市</th>
            <th>邮编</th>
        </tr>
        </thead>
        <tbody id="data">
        <tr>
            <td><input type="checkbox"></td>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Sachin</td>
            <td>Mumbai</td>
            <td>400003</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Uma</td>
            <td>Pune</td>
            <td>411027</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Sachin</td>
            <td>Mumbai</td>
            <td>400003</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Uma</td>
            <td>Pune</td>
            <td>411027</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Sachin</td>
            <td>Mumbai</td>
            <td>400003</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Uma</td>
            <td>Pune</td>
            <td>411027</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Sachin</td>
            <td>Mumbai</td>
            <td>400003</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Uma</td>
            <td>Pune</td>
            <td>411027</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Sachin</td>
            <td>Mumbai</td>
            <td>400003</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Uma</td>
            <td>Pune</td>
            <td>411027</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $('#selectAll').on('change', function () {
            $('#data input').prop('checked', $(this).prop('checked'));
        });
        $('#data').delegate('input', 'change', function () {
            var inputs = $('#data input');
            var isAllChecked = true;
            $.each(inputs, function (index, el) {
                if ($(el).prop('checked') === false) {
                    isAllChecked = false;
                }
            });
            $('#selectAll').prop('checked', isAllChecked);
        });
    });
</script>
</body>
</html>